<template>
	<view class="hospital-guide">
		<Search :real='false' @search='onSearch'></Search>
		<view class="hospital-guide-header">
			<view class="hospital-guide-header-item flexR u-border-bottom">
				<view @click="getHotMenu" :class="showGuide===false?'active':''">热门</view>
				<view v-for="(item, index) in hospitaOptions" :key="index" :class="hospitaValue===index?'active':''" @click="hospitaChange(item,index)">
					{{ item.label||'' }}
				</view>
			</view>
			<view class="hospital-guide-header-item flexR u-border-bottom" v-show="buildOptions.length">
				<view v-for="(item, index) in buildOptions" :key="index" :class="buildValue===index?'active':''" @click="buildChange(item,index)">
					{{ item.label||'' }}
				</view>
			</view>
			<view class="hospital-guide-header-item flexR u-border-bottom" v-show="floorOpitons.length">
				<view v-for="(item, index) in floorOpitons" :key="index"  :class="floorValue===index?'active':''" @click="floorChange(index)">
					{{ item.label||'' }}
				</view>
			</view>
		</view>
		<view class="div-cut"></view>
		<view class="hospital-guide-main" v-show="showGuide">
			<view class="section u-border-bottom">
				<u-section title="楼层平面图" :right="false" :bold='false' :line-color='themeColorLight' color="#000000"></u-section>
			</view>
			<view class="hospital-guide-img">
				<image :src="baseApi+currentFloor.imagePath" mode="scaleToFill"></image>
			</view>
			<view class="div-cut"></view>
			<view class="section">
				<u-section title="科室列表" :right="false" :bold='false' :line-color='themeColorLight' color="#000000"></u-section>
			</view>
			<view class="hospital-guide-depart">
				<u-cell-group v-if="currentFloor.departList.length">
					<u-cell-item v-for="item in currentFloor.departList" :key="item.deptCode" :title="item.deptName" @click='clickDepart(item)'></u-cell-item>
				</u-cell-group>
				<view style="padding: 20rpx;" class="u-border-top" v-else>
					该楼层无科室信息
				</view>
			</view>
			<!-- <view class="div-cut"></view>
			<view class="section u-border-bottom">
				<u-section title="楼层介绍" :right="false" :bold='false' :line-color='themeColorLight' color="#000000"></u-section>
			</view>
			<view class="hospital-guide-intro">
				<u-read-more>
					<rich-text :nodes="currentFloor.title"></rich-text>
				</u-read-more>
			</view> -->
		</view>
		<!-- 科室地址 -->
		<PopCard :show='showSearchResult' title='科室地址' @close='showSearchResult=false'>
			<view slot='content' class="card-content">
				<!-- <view class="card-content-main">
				</view> -->
					<view class="card-row" v-for="item in searchResult" :key="item.deptName">
						<text>{{item.deptName}}：</text>{{item.address}}
					</view>
			</view>
		</PopCard>
		<!-- 热门 -->
		<view class="hot-menu flexR" v-show="!showGuide">
			<view v-for="(item,index) in hotList" :key="index" class="service flexC" @click="toPage(item)">
				<text class="iconfont" :class="item.iconPath||'icon-daohang'" :style="{ backgroundColor: item.color||'', fontSize: (item.size||40)*2 + 'rpx' }"></text>
				<text :style="{ color: item.color||'', fontSize: (item.size||40)*0.8 + 'rpx' }">{{item.name||''}}</text>
			</view>
		</view>
		<Tip :tips='tips' :show='showTip' @close='showTip=false' @handleSubmit='navigate(menuItem)'/>
		<Load :load="loading"></Load>
	</view>
</template>

<script>
	import Search from '@/components/Search/index.vue'
	import Load from '@/components/Load/index.vue'
	import Tip from '@/components/AgreePop/index.vue'
	import { mapGetters } from 'vuex'
	import { getHospitalGuide, getDeptList } from '@/api/otherService.js'
	import { themeColorLight } from '@/static/js/theme.js'
	import { getMenu } from '@/api/home.js'
	import { getTips } from '@/api/system.js'
	import PopCard from '@/components/PopCard/index.vue'
	export default {
		components:{ Search, Load, Tip, PopCard },
		data() {
			return {
				themeColorLight,
				searchValue: "",
				hospitaValue: 0,
			    hospitaOptions: [],
			    buildValue: 0,
			    buildOptions: [],
			    floorValue: 0, //选择选中状态
			    floorOpitons :[],
			    dataAll:[],//返回的原始无序数组
			    currentFloor: {
					departList:[],
				}, //当前选中楼层信息
			    load:true,
				showGuide:true,
				hotList:[],
				menuItem:null,
				tips:{},
				showTip:false,
			    showSearchResult:false,
			    searchResult:[]
			}
		},
		computed:{
			...mapGetters(['baseApi'])
		},
		created() {
			this.initData()
		},
		methods: {
			initData(){
				this.load = true
				getHospitalGuide().then(data => {
					this.load = false
					if(data.length){
						this.dataAll = data
						this.hospitaOptions = []
						this.buildOptions = []
						this.floorOpitons = []
						data.forEach(item => {
							this.hospitaOptions.push(item)
						})
						let res1 = data[0].children||[]
						if(res1.length){
							res1.forEach(item => {
								this.buildOptions.push(item)
							})
							let res11 = res1[0].children||[]
							if(res11.length){
								res11.forEach(item => {
									this.floorOpitons.push(item)
								})
								this.currentFloor = res11[0]
							}
						}
					}else{
						this.dataAll = []
						this.hospitaOptions = []
						this.buildOptions = []
						this.floorOpitons = []
						this.currentFloor = {
							departList:[]
						}
					}
				}).catch(e => {
					this.load = false
				})
			},
			onSearch(val){
				if(val===''){
					this.showSearchResult = false;
					this.searchResult = [];
				}else{
					this.load = true
					let params = {
						deptName: val
					}
					getDeptList(params).then(data => {
						this.load = false
						this.searchResult = data||[];
						if (this.searchResult.length) {
							this.showSearchResult = true;
						}
					}).catch(e => {
						this.load = false
						this.searchResult = [];
						this.showSearchResult = false;
					})
				}
			},
			// 院区切换
			hospitaChange(val,index){
				this.showGuide = true
				let cur = '';
				this.hospitaOptions.forEach(item => {
					if (item.id === val.id) {
						cur = item.children;
					}
				});
				this.hospitaValue = index
				if (cur) {
					this.buildOptions = cur;
					this.buildChange(this.buildOptions[0], 0);
				}else{
					this.buildOptions = [];
					this.buildChange('', 0);
				}
			},
			// 切换楼宇
			buildChange(val,index){ //index或许是索引  或许是科室名
				let cur = '';
				if (val) {
					this.buildOptions.forEach(item => {
					  if (item.id === val.id) {
						cur = item.children;
					  }
					})
					this.buildValue = index
				}
				if (cur) {
					this.floorOpitons = cur;
					this.floorChange(0)
				} else {
					this.floorOpitons = [];
					this.floorChange('');
				}
			},
			// 切换楼层
			floorChange(val){
				let cur = '';
				if (val==='') {
					this.$u.toast('无对应楼层信息')	
				}else{
					cur = this.floorOpitons[val]; 
					this.floorValue = val
				}
				if (cur) {
					this.currentFloor = cur;
				} else {
					this.currentFloor = '';
				}
			},
			// 点击热门
			getHotMenu(){
				this.showGuide = false
				this.hospitaValue = -1
				this.buildOptions = []
				this.floorOpitons = []
				if(!this.hotList.length){
					this.load = true
					getMenu({type:7}).then(data => {
						this.load = false
						let res = data||''
						if(res){
							this.hotList = res['7']
						}else{
							this.hotList = []
						}
					}).catch(e => {
						this.load = false
						this.hotList = []
					})
				}
			},
			// 去页面
			toPage( item ){
				// debugger
				this.menuItem = null
				if((item.tipsStatus===0)&&item.tipsId){
					this.load = true
					getTips({tipsId:item.tipsId}).then(data => {
						this.load = false
						this.tips = data||''
						this.showTip = true
						this.menuItem = item
					}).catch(e => {
						this.load = false
					})
				}else{
					this.navigate(item)
				}
			},
			navigate(item){
				// debugger
				this.showTip = false
				// pageType 1 页面 2 外联 3 自助缴费 4 小程序
				if(item.pageType===1){
					uni.navigateTo({
						url:item.route
					})
				}else if(item.pageType===2){
					// 小程序跳转外链
					uni.navigateTo({
					    url: `/pages/OutPage/index?url=${item.route}`
					});
				}else if(item.pageType===4){
					// #ifdef MP-WEIXIN
					// 小程序跳转小程序
					uni.navigateToMiniProgram({
						appId: 'wx936466fce7552222',//小程序的appid
					    extraData: {//携带参数
						    token:token,
						    ocid:ocid
					    },
					    success(res) {
						    // 打开成功
					    }
					})
					// #endif
				}else if(item.pageType===3){
					uni.navigateTo({
						url:`${item.route}?menuId=${item.id}&payType=${item.payType}`
					})
				}
			},
			// 点击科室
			clickDepart(item){
				this.searchResult = [item]
				this.showSearchResult = true
			},
			close(){
				// debugger
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.hospital-guide{
		// padding-top: 110rpx;
		height: 100%;
		overflow: scroll;
		background-color: #ffF;
		.section{
			padding: 20rpx;
		}
		&-header{
			padding: 20rpx;
			padding-bottom: 0;
			&-item{
				width: calc(100vw - 60rpx);
				overflow-x: scroll;
				height: 60rpx;
				margin: 20rpx 0;
				padding-bottom: 10rpx;
				>view{
					min-width: 25%;
					padding: 0 20rpx;
					border: 1px solid $border-color;
					border-radius: 6rpx;
					margin: 0 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				>view.active{
					border: 1px solid $theme-color-light;
					background-color: #F7FFFF;
				}
			}
		}
		/* &-main{
			height: calc(100vh - 110rpx - 290rpx);
			overflow: scroll;
		} */
		&-img{
			height: 300rpx;
			width: calc(100vw - 40rpx);
			margin: 20rpx;
			>image{
				height: 100%;
				width: 100%;
			}
		}
		&-depart{
			>view{
				color: $text-color-grey;
			}
		}
		&-intro{
			padding: 20rpx;
			font-size: 24rpx;
			color: $text-color-grey;
		}
		.hot-menu{
			padding: 10rpx;
			.service{
				padding: 20rpx;
				align-items: center;
				>.iconfont{
					color: #fff;
					background-color: $theme-color;
					padding:10rpx;
					border-radius: 12rpx;
					margin-bottom: 10rpx;
				}
			}
		}
		.card-content{
			padding: 30rpx;
			margin-bottom: 30rpx;
			height: 500rpx;
			overflow: scroll;
			>view.card-row{
				padding: 10rpx 0;
				>text{
					display: inline-block;
					white-space:nowrap;
					color: $text-color-grey;
				}
			}
		}
	}
</style>
